<script setup lang="ts">
import { ref, watch, h, computed, onMounted } from 'vue'
import { ElNotification, ElSlider, ElInputNumber } from 'element-plus'
import 'element-plus/es/components/notification/style/css';
import 'element-plus/es/components/input-number/style/css';
import 'element-plus/es/components/slider/style/css';
import Button from './common/Button.vue'
import { useCoinStore } from '@/store/coin'
import { userStore } from '@/store/user'
import { limitBuy, limitSell, marketBuy, marketSell } from '@/apis/futures'
import router from '@/router'
const dom = ref()
const emit = defineEmits(['updateHeight'])
const props = defineProps(['domInfo'])
const tabList = ref([
    { title: '限价', value: 0 },
    { title: '市价', value: 1 },
])
const tabActive = ref(0)
const orderTYpe = ref('buy')
const buyPriceValue = ref(0)
const sellPriceValue = ref(0)
const buyNumValue = ref(0)
const sellNumValue = ref(0)
const marketBuyPrice = ref(0)
const marketSellPrice = ref(0)
const height = ref('')
const isLoading = ref(false)
const maxBuyableMarket = computed(() => {
    const max = Number(Number(userStore().userWallet.usdt) /
        Number(useCoinStore().infoPrice.close)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals)
    return Number(max)
})
const maxSellableMarket = computed(() => {
    const max = Number(Number(userStore().userWallet.usdt) /
        Number(useCoinStore().infoPrice.close)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals)
    return Number(max)
})
const maxBuyableQuantity = computed(() => {
    const max = Number(Number(userStore().userWallet.usdt) /
        Number(buyPriceValue.value)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals)
    return Number(max)
})
const maxSellableQuantity = computed(() => {
    const max = Number(Number(userStore().userWallet.usdt) /
        Number(sellPriceValue.value)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals)
    return Number(max)
})
const buyPercentage = ref(0)
const sellPercentage = ref(0)
const buyMaretPercentage = computed({
    get() {
        if (maxBuyableMarket.value > 0) {
            return Number(Number(marketBuyPrice.value * 100 / 1000))
        } else {
            return 0
        }
    },
    set(val) {
        marketBuyPrice.value = val / 100 * 1000
    }
})
const sellMaretPercentage = computed({
    get() {
        if (maxSellableMarket.value > 0) {
            return Number(Number(marketSellPrice.value * 100 / 1000))
        } else {
            return 0
        }
    },
    set(val) {
        marketSellPrice.value = val / 100 * 1000
    }
})
watch(buyPercentage, (newVal) => {
    buyNumValue.value = Number(Number(newVal * Number(maxBuyableQuantity.value) / 100).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals))
})
watch(sellPercentage, (newVal) => {
    sellNumValue.value = Number(Number(newVal * Number(maxSellableQuantity.value) / 100).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals))
})
watch(buyNumValue, (newVal) => {
    buyPercentage.value = Number(Number(newVal * 100 / Number(maxBuyableQuantity.value)).toFixed(0))
})
watch(sellNumValue, (newVal) => {
    sellPercentage.value = Number(Number(newVal * 100 / Number(maxSellableQuantity.value)).toFixed(0))
})
const turnoverBuy = computed({
    get() {
        return Number(Number(Number(buyNumValue.value) * Number(buyPriceValue.value)).toFixed(8))
    },
    set(newTotal) {
        buyNumValue.value = Number(Number(newTotal / Number(buyPriceValue.value)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals))
    }
})
const turnoverSell = computed({
    get() {
        return Number(Number(Number(sellNumValue.value) * Number(sellPriceValue.value)).toFixed(8))
    },
    set(newTotal) {
        sellNumValue.value = Number(Number(newTotal / Number(sellPriceValue.value)).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals))
    }
})
watch(maxBuyableQuantity, (newVal) => {
    if (Number(maxBuyableQuantity.value) > 0) {
        if (buyNumValue.value) {
            buyPercentage.value = Number(Number(buyNumValue.value * 100 / Number(maxBuyableQuantity.value)).toFixed(0))
        } else {
            buyPercentage.value = 0
        }
    }
}, { immediate: true })
watch(maxSellableQuantity, (newVal) => {
    if (Number(maxSellableQuantity.value) > 0) {
        if (sellNumValue.value) {
            sellPercentage.value = Number(Number(sellNumValue.value * 100 / Number(maxSellableQuantity.value)).toFixed(0))
        } else {
            sellPercentage.value = 0
        }
    }
}, { immediate: true })
userStore().setBuyStatus(0)
userStore().setSellStatus(0)
const buy = async () => {
    if (isLoading.value) {
        return
    }
    if (!userStore().userInfo.token) {
        userStore().setLoginFromRouter('/contract')
        router.push('/login')
    } else {
        isLoading.value = true
        try {
            if (tabActive.value === 0) {
                await limitBuy({
                    userId: userStore().userInfo.id,
                    coinName: useCoinStore().coinInfo.name,
                    unitName: 'USDT',
                    totalNum: buyNumValue.value,
                    unitPrice: buyPriceValue.value,
                    turnover: '',
                })
            } else {
                await marketBuy({
                    userId: userStore().userInfo.id,
                    coinName: useCoinStore().coinInfo.name,
                    unitName: 'USDT',
                    turnover: marketBuyPrice.value
                })
            }
            ElNotification({
                title: '',
                duration: 3000,
                message: h('div', { class: '' }, [
                    h('div', { class: 'w-full  flex items-center' }, [
                        h('div', { class: 'iconfont icon-success text-green-500 text-[20px]' }),
                        h('div', { class: 'text-black text-[14px] ml-[8px]' }, `${tabActive.value == 0 ? '限价' : '市价'}买单已生成`)
                    ]),
                    h('div', { class: 'text-[#9c9c9c] ml-[28px] text-[14px]' }, `您用USDT买入${buyNumValue.value}个${useCoinStore().coinInfo.name}的${tabActive.value == 0 ? '限价' : '市价'}订单已经生成`)
                ]),
            })
            buyNumValue.value = 0
            userStore().setBuyStatus(buyPriceValue.value)
            isLoading.value = false
        } catch (error: any) {
            ElNotification({
                title: '',
                duration: 3000,
                message: h('div', { class: '' }, [
                    h('div', { class: 'w-full  flex items-center' }, [
                        h('div', { class: 'iconfont icon-error text-red-500 text-[20px]' }),
                        h('div', { class: 'text-black text-[14px] ml-[8px]' }, `${error.msg}`)
                    ]),
                ]),
            })
            isLoading.value = false
        }

    }

}

const sell = async () => {
    if (isLoading.value) {
        return
    }
    if (!userStore().userInfo.token) {
        userStore().setLoginFromRouter('/trade')
        router.push('/login')
    } else {
        isLoading.value = true
        try {
            if (tabActive.value === 0) {
                await limitSell({
                    userId: userStore().userInfo.id,
                    coinName: useCoinStore().coinInfo.name,
                    unitName: 'USDT',
                    totalNum: sellNumValue.value,
                    unitPrice: sellPriceValue.value,
                    turnover: '',
                })
            } else {
                await marketSell({
                    userId: userStore().userInfo.id,
                    coinName: useCoinStore().coinInfo.name,
                    unitName: 'USDT',
                    turnover: marketSellPrice.value
                })
            }
            ElNotification({
                title: '',
                duration: 3000,
                message: h('div', { class: '' }, [
                    h('div', { class: 'w-full  flex items-center' }, [
                        h('div', { class: 'iconfont icon-success text-green-500 text-[20px]' }),
                        h('div', { class: 'text-black text-[14px] ml-[8px]' }, `${tabActive.value == 0 ? '限价' : '市价'}卖单已生成`)
                    ]),
                    h('div', { class: 'text-[#9c9c9c] ml-[28px] text-[14px]' }, `您用USDT卖出${sellNumValue.value}个${useCoinStore().coinInfo.name}的${tabActive.value == 0 ? '限价' : '市价'}订单已经生成`)
                ]),
            })
            sellNumValue.value = 0
            userStore().setSellStatus(sellPriceValue.value)
            isLoading.value = false
        } catch (error: any) {
            ElNotification({
                title: '',
                duration: 3000,
                message: h('div', { class: '' }, [
                    h('div', { class: 'w-full  flex items-center' }, [
                        h('div', { class: 'iconfont icon-error text-red-500 text-[20px]' }),
                        h('div', { class: 'text-black text-[14px] ml-[8px]' }, `${error.msg}`)
                    ]),
                ]),
            })
            isLoading.value = false
        }
    }
}
const changeTab = (val: number) => {
    tabActive.value = val
    setTimeout(() => {
        emit('updateHeight', dom.value.clientHeight + 51)
    }, 0);
}

const size = ref('lg')

watch(() => useCoinStore().coinInfo.price, (newVal) => {
    buyPriceValue.value = Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals))
    sellPriceValue.value = Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals))
})
watch(() => useCoinStore().coinInfo.buyPrice, (newVal) => {
    sellPriceValue.value = Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals))
    buyPriceValue.value = Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals))
})
watch(() => useCoinStore().coinInfo.sellPrice, (newVal) => {
    sellPriceValue.value = Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals))
    buyPriceValue.value = Number(Number(Number(newVal).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals)))
})
watch(() => props.domInfo, (v) => {
    if (v.width > 518) {
        size.value = 'lg'
    } else {
        size.value = 'sm'
    }
    height.value = `${v.height}px`
})

watch(() => userStore().userInfo.token, (v) => {
    if (!v) {
        setTimeout(() => {
            emit('updateHeight', dom.value.clientHeight + 51)
        }, 0);
    }
})

onMounted(() => {
    emit('updateHeight', dom.value.clientHeight + 51)
})
</script>

<template>
    <div class="px-[16px] overflow-hidden" :style="{ height }">
        <div
            class=" mx-[-16px]  px-[16px] text-[14px] flex flex-col justify-between  border-0  border-b-[1px] border-[#ededed] border-solid dark:border-[#333b47]">
            <div class="h-[40px]  flex items-center text-[14px] font-[500] relative">
                <Button class="!h-[24px] !leading-[24px] w-[50px] !text-[12px]" type="default">全仓</Button>
                <Button class="!h-[24px] !leading-[24px] w-[50px] mx-[10px] !text-[12px]" type="default">20x</Button>
            </div>
        </div>
        <div class=" box-border pt-[10px]" ref="dom">
            <div v-show="size === 'sm'"
                class="h-[24px] mb-[10px] mt-[2px] flex items-center  border-[#dddddd] border-solid border-[1px] dark:border-[#474d57] rounded-[4px] gap-[10px]">
                <div @click="orderTYpe = 'buy'"
                    :class="[orderTYpe === 'buy' ? `after:bg-rise after:rounded-[4px] bg-rise text-white after:content-[''] after:absolute after:right-[-8px] after:top-[4px] after:w-[19px] after:h-[19px] after:rotate-[135deg]` : 'text-[#757575] dark:text-[#929AA5]']"
                    class="  relative w-[calc(50%-5px)] cursor-pointer h-[27px]  leading-[27px]  text-center text-[14px] rounded-[4px]">
                    买入</div>
                <div @click="orderTYpe = 'sell'"
                    :class="[orderTYpe === 'sell' ? `after:bg-fall bg-fall text-white after:rounded-[4px] after:content-[''] after:absolute after:left-[-8px] after:top-[4px] after:w-[19px] after:h-[19px] after:rotate-[135deg]` : 'text-[#757575] dark:text-[#929AA5]']"
                    class=" relative cursor-pointer w-[calc(50%-5px)] h-[27px]  leading-[27px]   text-center text-[14px] rounded-[4px]">
                    卖出</div>
            </div>
            <div class="h-[20px] flex items-center text-[14px] gap-[10px] text-text dark:text-[#707A8A] font-bold">
                <div :class="[tabActive === item.value ? 'text-black dark:text-[#eaebef]' : '']" class="cursor-pointer"
                    v-for="item, i in tabList" :key="i" @click="changeTab(item.value)">{{ item.title }}</div>
            </div>
            <div v-show="tabActive === 0" class="mt-[10px] flex flex-col" :style="{ height: `calc(100% - 30px)` }">
                <div class="flex gap-[10px] flex-wrap ">
                    <div v-show="size === 'sm'" class="text-[12px] text-[#9c9c9c]">价格</div>
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber v-model="buyPriceValue" controls-position="right" :min="0" :precision="2"
                            :step="0.01" style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>价格</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative"
                        v-show="orderTYpe == 'sell' || size === 'lg'">
                        <ElInputNumber v-model="sellPriceValue" controls-position="right" :min="0" :precision="2"
                            :step="0.01" style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>价格</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div v-show="size === 'sm'" class="text-[12px] text-[#9c9c9c]">数量</div>
                    <div :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative"
                        v-show="orderTYpe === 'buy' || size === 'lg'">
                        <ElInputNumber v-model="buyNumValue" controls-position="right"
                            :disabled="!userStore().userInfo.token" :max="Number(maxBuyableQuantity)" :min="0"
                            :step="0.000001" style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>数量</span>
                            </template>
                            <template #suffix>
                                <span>{{ useCoinStore().coinInfo.name }}</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber v-model="sellNumValue" :disabled="!userStore().userInfo.token"
                            controls-position="right" :max="Number(maxSellableQuantity)" :min="0" :step="0.000001"
                            style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>数量</span>
                            </template>
                            <template #suffix>
                                <span>{{ useCoinStore().coinInfo.name }}</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div v-show="(orderTYpe === 'buy' || size === 'lg')"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="h-[20px] box-border px-[6px]">
                        <ElSlider :disabled="!userStore().userInfo.token"
                            :format-tooltip="(val) => val.toFixed(0) + '%'"
                            :marks="{ 0: '', 25: '', 50: '', 75: '', 100: '' }" size="small" v-model="buyPercentage" />
                    </div>
                    <div v-show="(orderTYpe === 'sell' || size === 'lg')"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="h-[20px] box-border px-[6px]">
                        <ElSlider :disabled="!userStore().userInfo.token" :format-tooltip="(val) => val + '%'"
                            :marks="{ 0: '', 25: '', 50: '', 75: '', 100: '' }" size="small" v-model="sellPercentage" />
                    </div>
                    <div v-show="(orderTYpe === 'buy' || size === 'lg') && userStore().userInfo.token"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber v-model="turnoverBuy" :max="Number(userStore().userWallet.usdt)"
                            :controls="false" :min="0" :step="0.00000001" style="width: 100%; height: 40px;"
                            align="right">
                            <template #prefix>
                                <span>成交额</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div v-show="(orderTYpe === 'sell' || size === 'lg') && userStore().userInfo.token"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber v-model="turnoverSell" :disabled="!userStore().userInfo.token"
                            :max="Number(userStore().userWallet.usdt)" :controls="false" :min="0" :step="0.00000001"
                            style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>成交额</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>
                </div>
                <div class="flex gap-[10px] flex-wrap mt-[12px] text-[12px] ">
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可用</div>
                        <div class="dark:text-[#eaebef] flex items-center">
                            <div>{{ userStore().userInfo.token ? userStore().userWallet.usdt : '-' }} USDT</div>
                            <div v-if="userStore().userInfo.token"
                                class="ml-[4px] w-[14px] h-[14px] bg-primary-400 cursor-pointer rounded-full flex items-center justify-center">
                                <span class="iconfont icon-jia text-[10px] font-bold text-white"></span>
                            </div>
                        </div>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可用</div>
                        <div class="dark:text-[#eaebef] flex items-center">
                            <div>{{ userStore().userInfo.token ? userStore().userWallet.usdt : '-' }} USDT</div>
                            <div v-if="userStore().userInfo.token"
                                class="ml-[4px] w-[14px] h-[14px] bg-primary-400 cursor-pointer rounded-full flex items-center justify-center">
                                <span class="iconfont icon-jia text-[10px] font-bold text-white"></span>
                            </div>
                        </div>
                    </div>
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可买</div>
                        <div class="dark:text-[#eaebef]">{{ userStore().userInfo.token ?
                            buyPriceValue ? maxBuyableQuantity
                                : '--' :
                            `--` }} {{ useCoinStore().coinInfo.name }}</div>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可卖</div>
                        <div class="dark:text-[#eaebef]">{{ userStore().userInfo.token ?
                            sellPriceValue ? maxSellableQuantity
                                : '--' :
                            `--` }} {{ useCoinStore().coinInfo.name }}</div>
                    </div>
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <Button :is-loading="isLoading" @click="buy"
                            class="w-full bg-rise text-white h-[36px] leading-[36px] active:bg-rise">{{
                                !userStore().userInfo.token ? '登录' : '买入' + useCoinStore().coinInfo.name }}</Button>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <Button :is-loading="isLoading" @click="sell"
                            class="w-full !bg-fall text-white h-[36px] leading-[36px] active:!bg-fall">{{
                                !userStore().userInfo.token ? '登录' : '卖出' + useCoinStore().coinInfo.name }}
                        </Button>
                    </div>
                </div>
            </div>
            <div v-show="tabActive === 1" class="flex flex-col mt-[10px]" :style="{ height: `calc(100% - 30px)` }">
                <div class="flex gap-[10px] flex-wrap ">
                    <div v-show="size === 'sm'" class="text-[12px] text-[#9c9c9c]">价格</div>

                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative cursor-no-drop">
                        <div
                            class="h-[40px] bg-[#ededed] dark:bg-[#333b47] rounded-[4px] flex  justify-between px-[15px] text-[14px] leading-[40px]">
                            <div class="text-[#9C9C9C] dark:text-[#707A8A]">价格</div>
                            <div class="text-[#bfbfbf] dark:text-[#4f5867]">市价</div>
                        </div>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative cursor-no-drop">
                        <div
                            class="h-[40px] bg-[#ededed] dark:bg-[#333b47] rounded-[4px] flex  justify-between px-[15px] text-[14px] leading-[40px]">
                            <div class="text-[#9C9C9C] dark:text-[#707A8A]">价格</div>
                            <div class="text-[#bfbfbf] dark:text-[#4f5867]">市价</div>
                        </div>
                    </div>
                    <div v-show="size === 'sm'" class="text-[12px] text-[#9c9c9c]">成交额</div>

                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber placeholder="最少10" :disabled="!userStore().userInfo.token"
                            v-model="marketBuyPrice" :max="Number(userStore().userWallet.usdt)" :controls="false"
                            :min="0" :step="0.00000001" style="width: 100%; height: 40px;" align="right">
                            <template #prefix>
                                <span>成交额</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>

                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }" class="relative">
                        <ElInputNumber placeholder="最少10" v-model="marketSellPrice"
                            :disabled="!userStore().userInfo.token" :max="Number(userStore().userWallet.usdt)"
                            :controls="false" :min="0" :step="0.00000001" style="width: 100%; height: 40px;"
                            align="right">
                            <template #prefix>
                                <span>成交额</span>
                            </template>
                            <template #suffix>
                                <span>USDT</span>
                            </template>
                        </ElInputNumber>
                    </div>
                    <div :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="h-[20px] box-border px-[6px]">
                        <ElSlider :disabled="!userStore().userInfo.token"
                            :format-tooltip="(val) => val.toFixed(0) + '%'"
                            :marks="{ 0: '', 25: '', 50: '', 75: '', 100: '' }" size="small"
                            v-model="buyMaretPercentage" />
                    </div>
                    <div :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="h-[20px] box-border px-[6px]">
                        <ElSlider :disabled="!userStore().userInfo.token" :format-tooltip="(val) => val + '%'"
                            :marks="{ 0: '', 25: '', 50: '', 75: '', 100: '' }" size="small"
                            v-model="sellMaretPercentage" />
                    </div>
                </div>
                <div class="flex gap-[10px] flex-wrap mt-[12px] text-[12px] ">
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可用</div>
                        <div class="dark:text-[#eaebef] flex items-center">
                            <div>{{ userStore().userInfo.token ? userStore().userWallet.usdt : '-' }} USDT</div>
                            <div v-if="userStore().userInfo.token"
                                class="ml-[4px] w-[14px] h-[14px] bg-primary-400 cursor-pointer rounded-full flex items-center justify-center">
                                <span class="iconfont icon-jia text-[10px] font-bold text-white"></span>
                            </div>
                        </div>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class="relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可用</div>
                        <div class="dark:text-[#eaebef] flex items-center">
                            <div>{{ userStore().userInfo.token ? userStore().userWallet.usdt : '-' }} USDT</div>
                            <div v-if="userStore().userInfo.token"
                                class="ml-[4px] w-[14px] h-[14px] bg-primary-400 cursor-pointer rounded-full flex items-center justify-center">
                                <span class="iconfont icon-jia text-[10px] font-bold text-white"></span>
                            </div>
                        </div>
                    </div>
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可买</div>
                        <div class="dark:text-[#eaebef]">{{ userStore().userInfo.token ? maxBuyableMarket : '--' }} {{
                            useCoinStore().coinInfo.name }}</div>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <div class="text-text dark:text-[#707A8A]">可卖</div>
                        <div class="dark:text-[#eaebef]">{{ userStore().userInfo.token ? maxSellableMarket : '--' }} {{
                            useCoinStore().coinInfo.name }}</div>
                    </div>
                    <div v-show="orderTYpe === 'buy' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <Button :is-loading="isLoading" @click="buy"
                            class="w-full !bg-rise text-white h-[36px] leading-[36px] active:!bg-rise">{{
                                !userStore().userInfo.token ? '登录' : '买入' + useCoinStore().coinInfo.name }}</Button>
                    </div>
                    <div v-show="orderTYpe === 'sell' || size === 'lg'"
                        :style="{ 'width': size === 'lg' ? 'calc(50% - 5px)' : 'calc(100% - 5px)' }"
                        class=" relative flex justify-between items-center">
                        <Button :is-loading="isLoading" @click="sell"
                            class="w-full !bg-fall text-white h-[36px] leading-[36px] active:!bg-fall">{{
                                !userStore().userInfo.token ? '登录' : '卖出' + useCoinStore().coinInfo.name }}</Button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
:deep(.el-input-number__increase) {
    height: 19px !important;
    background-color: transparent !important;
}

:deep(.el-input-number__decrease) {
    height: 19px !important;
    background-color: transparent !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-spinner {
    animation: spin 1.5s linear infinite;
}
</style>